<template>
  <div class="event active" @click="Login">
    <i class="ion ion-ios-radio-button-on icon-in-active-mode"></i>
    <h4 class="event__point">{{ date }}</h4>
    <p class="event__description" >
      {{ title }}   
    </p>
  </div>

  <!-- 轮播图 -->
  <div class="swipe">
    <swiper
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      :slides-per-view="1"
      navigation
      :loop="true"
      :modules="modules"
      :autoplay="{ delay: 2000 }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(item, index) in swiperList" :key="index"
        ><img :src="item"
      /></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import moment from "moment";
import { onMounted, ref, watch } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { getHomeData } from "../api/user";
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const router = useRouter();
    const date = ref("2022-1-1 0:0:0");
    const title = ref("请先登录");
    const swiperList = [
      require("@/images/swiper-1.png"),
      require("@/images/swiper-2.png"),
      require("@/images/swiper-3.png"),
      require("@/images/swiper-4.png"),
    ];

    // 去到登录页面
    const Login = () => {
      if(title == '请先登录') {
         router.push("/login");
      } else {
        return
      }
     
    };
    const onSwiper = (swiper) => {
      // console.log(swiper);
    };
    const onSlideChange = () => {
      // console.log('slide change');
    };
    watch([date], (newval, oldval) => {
      // console.log(newval);
      if(newval) {
        clearInterval()
      }
    });
    onMounted(() => {
      getHomeData().then((res) => {
        // console.log(res);
        title.value = res.data;
      });
      setInterval(() => {
        date.value = moment().format("YYYY-M-D H:m:s");
      }, 1000);
    });

    return {
      router,
      date,
      swiperList,
      title,
      Login,
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
    };
  },
};
</script>

<style scoped>
img {
  width: 750px;
  height: 750px;
}

.event {
  position: relative;
  margin-bottom: 25px;
  padding-left: 30px;
  cursor: pointer;
}

.event i {
  font-size: 24px;
  font-weight: 100;
  position: absolute;
  left: 0;
  top: -4px;
}

.event .event__point {
  margin: 0;
  color: #555;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
}

.event .event__duration {
  position: absolute;
  top: 5px;
  right: 0;
  color: #999;
  font-size: 10px;
  font-weight: 800;
  font-style: italic;
}

.event .event__description {
  margin-top: 10px;
  color: #919294;
  font-size: 13px;
  font-weight: 300;
}

.event.active {
  background: #e8e8e8;
  padding: 17px 0 5px 60px;
  margin-bottom: 38px;
  border-radius: 5px;
}

.event.active::after {
  content: "";
  display: block;
  width: 90%;
  height: 10px;
  background: #fff;
  border: 2px solid #ddd;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translatex(-50%);
}

.event.active i {
  position: absolute;
  left: 25px;
  top: 17px;
}

</style>